<template>
  <div id="printRef">
    <el-card shadow="hover" header="数据报告提交">
      <el-form ref="tableRulesRef" :model="tableData" size="default">
        <el-table :data="tableData.data" border class="module-table-uncollected">
          <el-table-column
              v-for="(item, index) in tableData.header"
              :key="index"
              show-overflow-tooltip
              :prop="item.prop"
              :width="item.width"
              :label="item.label"
          >
            <template v-slot:header>
              <span v-if="item.isRequired" class="color-danger">*</span>
              <span class="pl5">{{ item.label }}</span>
              <el-tooltip v-if="item.isTooltip" effect="dark" content="这是tooltip" placement="top">
                <i class="iconfont icon-quanxian"/>
              </el-tooltip>
            </template>
            <template v-slot="scope">
              <el-form-item
                  :prop="`data.${scope.$index}.${item.prop}`"
                  :rules="[{ required: item.isRequired, message: '不能为空', trigger: `${item.type}` == 'input' ? 'blur' : 'change' }]"
              >
                <el-select v-if="item.prop === 'a1'" v-model="scope.row[item.prop]" placeholder="请选择">
                  <el-option v-for="sel in tableData.option1" :key="sel.id" :label="sel.label" :value="sel.value"/>
                </el-select>
                <el-select v-if="item.prop === 'a2'" v-model="scope.row[item.prop]" placeholder="请选择">
                  <el-option v-for="sel in tableData.option2" :key="sel.id" :label="sel.label" :value="sel.value"/>
                </el-select>
                <el-date-picker
                    v-else-if="item.type === 'date'"
                    v-model="scope.row[item.prop]"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%"
                />
                <el-input v-else-if="item.type === 'input'" v-model="scope.row[item.prop]" placeholder="请输入内容"/>
                <el-input v-else-if="item.type === 'dialog'" v-model="scope.row[item.prop]" readonly
                          placeholder="请输入内容">
                  <template v-slot:suffix>
                    <i class="iconfont icon-shouye_dongtaihui"/>
                  </template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-row class="flex mt15">
        <div class="flex-margin">
          <!--        <el-button size="default" type="success" @click="onValidate">表格验证</el-button>-->
          <el-button size="default" type="success" @click="submitForm">表格验证</el-button>
          <el-button size="default" type="primary" @click="onAddRow">新增一行</el-button>
          <el-button @click="onPrintJs" size="default" type="primary">
            <SvgIcon name="iconfont icon-dayin"/>
            导出报告
          </el-button>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts">
import {defineComponent, toRefs, reactive, ref} from 'vue';
import {ElMessage} from 'element-plus';
import printJs from "print-js";

// 定义接口来定义对象的类型
interface TableHeader {
  prop: string;
  width: string | number;
  label: string;
  isRequired?: boolean;
  isTooltip?: boolean;
  type: string;
}

interface TableRulesState {
  tableData: {
    data: any[];
    header: TableHeader[];
    option: any[];
  };
}

export default defineComponent({
  name: 'pagesTableRules',
  setup() {
    const tableRulesRef = ref();
    const state = reactive<TableRulesState>({
      tableData: {
        data: [],
        header: [
          {prop: 'a1', width: '', label: '景点/酒店', isRequired: true, type: 'select'},
          {prop: 'a2', width: '', label: 'OTA', isRequired: true, type: 'select'},
          {prop: 'a3', width: '', label: '开始时间', isRequired: true, type: 'date'},
          {prop: 'a4', width: '', label: '结束时间', isRequired: true, type: 'date'},
          // {prop: 'a5', width: '', label: '五级分类', isRequired: true, type: 'input'},
          // {prop: 'a6', width: '', label: '六级分类', isTooltip: true, type: 'dialog'},
          // {prop: 'a7', width: '', label: '演示级分类', type: 'input'},
          // {prop: 'a8', width: '', label: '颜色是分类', type: 'input'},
        ],
        option1: [
          {value: '景点', label: '景点'},
          {value: '酒店', label: '酒店'},
        ],
        option2: [
          {value: '携程', label: '携程'},
          {value: '美团', label: '美团'},
        ],
      },
    });
    // 表格验证
    const onValidate = () => {
      if (state.tableData.data.length <= 0) return ElMessage.warning('请先点击增加一行');
      tableRulesRef.value.validate((valid: any) => {
        if (!valid) return ElMessage.warning('表格项必填未填');
        ElMessage.success('全部验证通过');
      });
    };
    //提交表单请求
    const submitForm = () => {
      ElMessage.success('提交表单成功,此处以后发送post请求');
    };
    // 新增一行
    const onAddRow = () => {
      state.tableData.data.push({
        a1: '',
        a2: '',
        a3: '',
        a4: '',
        // a5: '',
        // a6: '',
        // a7: '',
        // a8: '',
      });
    };
    // 打印点击
    const onPrintJs = () => {
      printJs({
        printable: 'printRef',
        type: 'html',
        css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', '//unpkg.com/element-plus/dist/index.css'],
        scanStyles: false,
        // style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
        style: `@media print{}`,
      });
    };
    return {
      onValidate,
      onAddRow,
      tableRulesRef,
      submitForm,
      onPrintJs,
      ...toRefs(state),
    };
  },
});
</script>
